<template>
  <div>
    <el-card>
      <div slot="header">
        <el-page-header>
          <template slot-scope="scope" slot="content">
            <div class="header">
              <p>订单管理</p>
              <el-input
                v-model="search"
                placeholder="订单号/身份证/编号/搜索"
              />
            </div>
          </template>
        </el-page-header>
      </div>
      <div>
        <el-table :data="final_tabledata" style="width: 100%">
          <el-table-column
            header-align="center"
            align="center"
            prop="id"
            label="编号"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="150"
            prop="ordercode"
            label="订单号"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="village"
            label="小区名称"
            :filters="filter_villages"
            :filter-method="filterHandler"
          >
          </el-table-column>

          <el-table-column
            label="车位编号"
            prop="parkcode"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            label="实付金额"
            prop="price"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="买方身份证"
            prop="idcode"
            header-align="center"
            align="center"
            width="200px"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="状态"
            prop="order_state"
            :filters="[
              { text: '已完成', value: '已完成' },
              { text: '待支付', value: '待支付' },
            ]"
            :filter-method="filterHandler"
          >
            <template slot-scope="scope">
              <el-tag :type="getTagType(scope.row.order_state)">{{
                scope.row.order_state
              }}</el-tag>
            </template>
          </el-table-column>
    
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {},
  computed: {
    final_tabledata() {
      return this.tableData.filter(
        (item) =>
          this.search == "" ||
          item.id.startsWith(this.search) ||
          item.ordercode.startsWith(this.search) ||
          item.idcode.startsWith(this.search)
      );
    },
    filter_villages() {
      let res = [];
      for (let i of this.villages) {
        res.push({
          text: i,
          value: i,
        });
      }
      return res;
    },
  },
  methods: {
    filterHandler(value, row, column) {
      console.log(value, column);
      const property = column["property"];
      return row[property] === value;
    },
    getTagType(state) {
      switch (state) {
        case "已取消":
          return "info";
        case "已完成":
          return "";
        case "待支付":
          return "success";
      }
    },
  },
  data() {
    return {
      villages: ["梦云小区", "兰州小区"],
      search: "",
      tableData: [
        {
          id: "0001",
          ordercode: "65357088490854950",
          village: "天晨小区",
          type: "开发商",
          parkcode: "B211",
          price: "90000",
          order_state: "已取消",
          customname: "周峰",
          idcode: "220102199003072510",
        },
        {
          id: "0002",
          ordercode: "68121949043124910",
          village: "超超公馆",
          type: "开发商",
          parkcode: "C021",
          price: "80000",
          order_state: "已完成",
          customname: "周峰",
          idcode: "220102199003070435",
        },
        {
          id: "0003",
          ordercode: "92833692331332720",
          village: "天晨小区",
          type: "开发商",
          parkcode: "A101",
          price: "94000",
          order_state: "已完成",
          customname: "张天晟",
          idcode: "220102199003077258",
        },
        {
          id: "0004",
          ordercode: "35482274778187276",
          village: "超超公馆",
          type: "开发商",
          parkcode: "北A01",
          price: "140000",
          order_state: "已完成",
          customname: "张天晟",
          idcode: "220102199003072991",
        },
        {
          id: "0005",
          ordercode: "96471977913752200",
          village: "天日小区",
          type: "开发商",
          parkcode: "南C01.1",
          price: "120000",
          order_state: "已完成",
          customname: "周峰",
          idcode: "220102199003070152",
        },
      ],
    };
  },
};
</script>

<style scoped>
.mheader {
  width: 100%;
}
.el-card {
  margin-top: 2rem;
}
.el-card >>> .el-page-header__content {
  width: 90%;
}
.el-card >>> .el-page-header__left {
  align-items: center;
}
.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header .el-input{
  width: 300px;
}
</style>